<template>
	<el-main class="image-main" v-loading="loading">
		<div class="top p-3">
			<el-row :gutter="10">
				<el-col :span="6" :offset="0" v-for="(item, index) in list" :key="index">
					<el-card shadow="hover" class="relative mb-3" :body-style="{'padding':0}">
						<el-image :src="item.url" fit="cover" class="el-image" style="width: 100%;"
							:preview-src-list="[item.url]" :initial-index="0"></el-image>
						<div class="image-title">{{item.name}}</div>
						<div class="div-button">
							<el-button type="primary" size="small" plain @click="handleEdit(item)">重命名</el-button>

							<el-popconfirm title="是否要删除该图片?" confirmButtonText="确认" cancelButtonText="取消"
								@confirm="handleDelete(item.id)">
								<template #reference>

									<el-button type="primary" size="small" plain>删除</el-button>
								</template>
							</el-popconfirm>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<div class="bottom">
			<el-pagination background layout="prev,pager,next" :total="total" :current-page="currentPage"
				:page-size="limit" @current-change="getData" />
		</div>
	</el-main>

	<el-drawer v-model="drawer" title="上传图片">
		<UploadFile :data="{ image_class_id }" @success="handleUploadSuccess" />
	</el-drawer>

</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		getImageList,
		updateImage,
		deleteImage
	} from "~/api/image.js";
	import {
		showPrompt,
		toast
	} from "~/composables/util.js"
	import UploadFile from "./UploadFile.vue"

	const drawer = ref(false)
	const openUploadFile = () => drawer.value = true

	// 当前页码
	const currentPage = ref(1);
	// 总记录数
	const total = ref(0);
	// 每页显示数量
	const limit = ref(10);
	// 图片列表数据
	const list = ref([]);
	// 加载状态
	const loading = ref(false);
	// 当前图片分类 ID
	const image_class_id = ref(0);

	// 获取图片列表数据
	function getData(p = null) {
		if (typeof p === "number") {
			currentPage.value = p;
		}

		loading.value = true;
		getImageList(image_class_id.value, currentPage.value)
			.then((res) => {
				total.value = res.totalCount;
				list.value = res.list; // 假设接口返回的数据结构中有 list 字段
			})
			.catch((error) => {
				console.error("获取图片列表失败:", error);
				// 可以在这里添加显示错误提示给用户的逻辑
			})
			.finally(() => {
				loading.value = false;
			});
	}

	// 根据分类 ID 重新加载图片列表
	const loadData = (id) => {
		currentPage.value = 1;
		image_class_id.value = id;
		getData();
	};

	const handleEdit = (item) => {
		showPrompt("重命名", item.name)
			.then(({
				value
			}) => {
				updateImage(item.id, value)
					.then(res => {
						toast("修改成功")
						getData()
					})
					.finally(() => {
						loading.value = false
					})
			})
	}

	const handleDelete = (id) => {
		loading.value = true
		deleteImage([id]).then(res => {
				toast("删除成功")
				getData()
			})
			.finally(() => {
				loading.value = false
			})
	}

	// 修改方法名，确保和模板里使用的一致
	const handleUploadSuccess = () => getData(1)

	defineExpose({
		loadData,
		openUploadFile
	});
</script>

<style scoped>
	.image-main {
		position: relative;
	}

	.image-main .top {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 50px;
		overflow-y: auto;
	}

	.image-main .bottom {
		position: absolute;
		bottom: 0;
		height: 50px;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.el-image {
		width: 100%;
		height: 150px;
	}

	.div-button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem;
	}

	.image-title {
		position: absolute;
		top: 122px;
		left: -1px;
		right: -1px;
		@apply text-sm truncate text-gray-100 bg-opacity-50 □bg-gray-800 px-2 py-1;

	}
</style>